<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style lang="scss">
		.main{
			width: 200px;
			height: 200px;
			border: 1px solid ;
			display: flex;
			justify-content: center; 
			align-items: center;
			p{
				color: red;
			}
		}
		.box1{
			width: 80px;
			height: 50px;
			background-color: black;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 5s; 
			animation: name duration timing-function delay iteration-count direction fill-mode;
			}
		.box1:hover{
			animation: admin 4s ;
			/* transform: rotate(50deg) scale(0.3) skew(50deg) translate(50px,50px); */
		}
		.wqh{
			width: 100px;
			height: 100px;
			background-color: red;

		}
			
		
		@keyframes admin {
			from{
				background-color: black;
			}to{
				background-color: wheat;
			}
		}
	</style>
	<body>
		<ul id="list">
			<li class="wqhs">asdasdad</li>
			<li>asdasdad</li>
			<li>asdasdad</li>
			<li class="wqhs">asdasdad</li>
			<li>asdasdad</li>
		</ul>
		<input type="checkbox" name="" id="">
		<input type="checkbox" name="" id="">
		<input type="checkbox" name="" id="">
		<input type="checkbox" name="" id="">
		<input type="checkbox" name="" id="">
	</body>
	<script>
		// let arr = [{all:520},{b:400},{c:100},{d:60}]
		
		// let wqh = document.querySelector('.wqh')
		// console.log(wqh);
		// var ob = new IntersectionObserver(function(entires){
		// 	var entry = entires[0]
		// 	console.log(entry);
		// },{
		// 	thresholds:0.1
		// })
		
		// ob.observe(wqh);
		
		
		// 1.typeof 用来检测数据类型 返回值有：string number Boolean  undefuned Object function 
		// 	他返回的值都是字符串类型的   typeof 可以操作 判断基本数据类型，但是也是存在一些特例，比如typeof null 
		// 	返回值是一个object 因为 null这个特殊值被认为是一个对象空间的引用， 表示一个空对象指针，实际上是基础类型
			
		// 2.split会把字符串转成一个数组，按分割符，分隔开  join把数组每个项用指定的字符连接起来成字符串
		
		// 3.事件委托就是将子元素的事件委托给父元素可以大量节省内存占用，减少事件注册 如果子元素阻止了冒泡事件那么事件委托是实现不了的 他的原理就是利用了事件冒泡 
		
		// let ul = document.getElementById('list').addEventListener('click',function(e){
		// 	if(e.target.className == 'wqhs'){
		// 		console.log('123');
		// 	}
		// })
		
		// 4.使用splice 方法 他接受 三个参数 第一个是要从下标第几位开始 第二个截取到下标的第几位  第三个 要插入的元素
		// 他的返回值就是截取的值 会影响原数组
		// let arr = [1,2,3,4]
		
		// console.log(arr.splice(0,1,'1'));
		// console.log(arr);
		
		// 5.使用js的获取标签
		// let checked = document.getElementsByTagName('input')
		// console.log(checked.length); //5
		
		// 6. 因为js的运算符 - * / 具有隐式转换   使用+运算如果有一个是string类型那么就会拼接
		// var foo = '11'+2-'1'  //111
		// console.log(typeof foo);  //number.
		
		// 7.
		// let str = 'get-element-by-id'
		// let newstr = str.split('')  //首先将字符转转为数组
		// newstr.forEach((item,i)=>{  //循环遍历这个数组
		// 	if(item === '-'){ 
		// 		newstr.splice(i,1)
		// 		newstr[i] = newstr[i].toLocaleUpperCase() //因为删除了 '-' 所以数组下标的item会迁移
		// 	}
		// })
		// console.log(newstr.join('')); //最后转成数组即可
		
		// 8. 4.使用splice 方法 他接受 三个参数 第一个是要从下标第几位开始 第二个截取到下标的第几位  第三个 要插入的元素
		// 他的返回值就是截取的值 会影响原数组
		
		
		// 10
		/**
		 * <div></div>
		 * 
		 * div{
			border-radius: 50%;
			
		 * }
		 * 
		 * **/
		 
		 
		 // 11.
		 /**
		  * 1.flex布局 首先给父元素开启dislay：flex： 设置水平和垂直方向的居中 也是应用最多的一种
		  * 2.position 给父元素设置相对定位 ，子元素绝对定位 给子元素设置 top50% left50% margin-top:-自身高度的一半 margin-left:-自身宽度的一半；
		  * 或者使用transfrom：translate：-50% -50%；
		  * 3.position+margin：auto; 给父元素的上下左右 都设置为0px 然后子元素设置margin：auto;
		  * 
		  * 
		  * **/
		  
		  //12.使用indexof 或者includes 来实现
		  
		// let arr = [1,2,3,2,3,3,4,5,6,4,]
		//  let newarr = []
		//  for (var i = 0; i < arr.length; i++) {
		// 	if(!newarr.includes(arr[i])){
		// 		newarr.push(arr[i])
		// 	}
			
		// 	if(newarr.indexOf(arr[i]) == -1){
		// 		newarr.push(arr[i])
		// 	}
		
		//  }
		//  console.log(newarr);
		
		
		// 13.
		// 1.输出四个四 因为setTimeout 是一个宏任务所以他需要等待 主线程执行完毕
		for(i=0; i<=3;i++){
			a(i)
		}
		
		function a(e){
			setTimeout(()=>{
				console.log(e);
			},0)
		}
		
	</script>
</html>